<template>
	<div class="main">
		<navTop></navTop>
		<!-- <div class="breadBox">
			<div style="width:1440px;;margin:0 auto;">
				<el-breadcrumb separator="/">
				<el-breadcrumb-item>学校信息</el-breadcrumb-item>
				<el-breadcrumb-item>选科管理</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
		</div> -->
		<div class="contentMain">
			<div class="contentmaincontent">
				<div class="searchlist">
					<router-link to="/studentinfo" active-class="hover">学生信息</router-link>
					<router-link to="/teacherinfo" active-class="hover">教师信息</router-link>
					<router-link to="/grademanagement" active-class="hover">年级管理</router-link>
					<router-link to="/classmanagement" active-class="hover">班级管理</router-link>
					<router-link to="/subjectmanagement" active-class="hover">科目管理</router-link>
					<!-- <router-link to="/subjectselectionmanagement" active-class="hover">选科管理</router-link> -->
					<router-link to="/topicmanagement" active-class="hover">题型管理</router-link>
					<!-- <router-link to="/" active-class="hover">上线管理</router-link> -->
					<!-- <router-link to="/taskset" active-class="hover">任务设置 </router-link> -->
				</div>
				<div class="overviewcontent">
					<div class="tableContent">
						<el-table
							class="custom-table"
							ref="multipleTable"
							:data="choosesubjectlist"
							stripe
							tooltip-effect="dark"
							style="width: 100%"
							@selection-change="handleSelectionChange"
							:header-cell-style="{ background: '#D8E4F0', color: '#2A303B',fontWeight:'500' }">
							<el-table-column
							type="selection"
							width="55">
							</el-table-column>
							<el-table-column
							prop="name"
							label="选科名称">
							</el-table-column>
							<el-table-column
							prop="rule"
							label="选科规则">
							</el-table-column>
							<el-table-column
							label="考试科目">
							<template slot-scope="scope">
								<ul class="answerlist">
									<li v-for="item in scope.row.courses" :class="item.courName=='语文'?'ywcolor':item.courName=='数学'?'sxcolor':item.courName=='英语'?'yycolor':item.courName=='物理'?'wlcolor':item.courName=='化学'?'hxcolor':item.courName=='生物'?'swcolor':item.courName=='历史'?'lscolor':item.courName=='地理'?'dlcolor':'zzcolor'">{{item.courName}}</li>
								</ul>
							</template>
							</el-table-column>
							<!-- <el-table-column
							prop="xhNumber"
							label="赋分模型">
							</el-table-column> -->
							<el-table-column
								fixed="right"
								label="操作"
								align="center"
								width="150">
								<template slot-scope="scope">
									<div style="display: flex;">
										<el-button @click="handleClick(scope.row)" type="text" size="small" style="display: flex;align-items: center;"><img src="../../assets/image/school/edit.png" style="width:12px;margin-right:5px;" />编辑</el-button>
										<el-button type="text" size="small" style="display: flex;align-items: center;color:#EC555A"><img src="../../assets/image/school/del.png" style="width:12px;margin-right:5px;" />删除</el-button>
									</div>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>
			</div>
		</div>
		<!-- <div class="examfooter">
			<div class="examFootercontent">
				<div class="totaldata">
					<span>已选<i>2</i>项 / 共100项</span>
					<em @click="chooseStudenttab">添加新学科</em>
					<em>批量删除</em>
				</div>
				<div>
					<el-pagination
						background
					      @size-change="handleSizeChange"
					      @current-change="handleCurrentChange"
					      :current-page.sync="currentPage3"
					      :page-size="100"
						  :pager-count="5"
					      layout="prev, pager, next, jumper"
					      :total="1000">
					    </el-pagination>
				</div>
			</div>
		</div> -->
		<!-- 创建编辑学生 -->
		<div class="addExamMain" v-if="exditstudentIshow">
			<div class="addExamContent">
				<h3>创建/编辑选科组</h3>
				<ul>
					<li>
						<span>选科组名称：</span>
						<div class="inputBox">
							<el-input v-model="exitStudent.id" placeholder="请输入内容" @input="handleInput"></el-input>
						</div>
					</li>
					<li>
						<span>选科规则名称：</span>
						<div class="inputBox">
							<el-input v-model="exitStudent.id" placeholder="请输入内容" @input="handleInput"></el-input>
						</div>
					</li>
					<li>
						<span>必考科目：</span>
						<div class="inputBox">
							<el-select v-model="exitStudent.xb" multiple placeholder="请选择">
							  <el-option
								v-for="item in gradelist"
								:key="item.id"
								:label="item.name"
								:value="item.id">
							  </el-option>
							</el-select>
						</div>
					</li>
					<li>
						<span>选考1科目：</span>
						<div class="inputBox">
							<el-select v-model="exitStudent.xb" multiple placeholder="请选择">
							  <el-option
								v-for="item in gradelist"
								:key="item.id"
								:label="item.name"
								:value="item.id">
							  </el-option>
							</el-select>
						</div>
					</li>
					<li>
						<span>选考1必选数 ：</span>
						<div class="inputBox">
							<el-select v-model="exitStudent.xb" multiple placeholder="请选择">
							  <el-option
								v-for="item in gradelist"
								:key="item.id"
								:label="item.name"
								:value="item.id">
							  </el-option>
							</el-select>
						</div>
					</li>
					<li>
						<span>选考2科目：</span>
						<div class="inputBox">
							<el-select v-model="exitStudent.xb" multiple placeholder="请选择">
							  <el-option
								v-for="item in gradelist"
								:key="item.id"
								:label="item.name"
								:value="item.id">
							  </el-option>
							</el-select>
						</div>
					</li>
					<li>
						<span>选考2必选数 ：</span>
						<div class="inputBox">
							<el-select v-model="exitStudent.xb" multiple placeholder="请选择">
							  <el-option
								v-for="item in gradelist"
								:key="item.id"
								:label="item.name"
								:value="item.id">
							  </el-option>
							</el-select>
						</div>
					</li>
					<li>
						<span>赋分开关：</span>
						<el-switch v-model="zhswitch"></el-switch>
					</li>
					<li>
						<span>赋分模型：</span>
						<div class="inputBox">
							<el-select v-model="exitStudent.grade" multiple placeholder="请选择">
							  <el-option
								v-for="item in gradelist"
								:key="item.id"
								:label="item.name"
								:value="item.id">
							  </el-option>
							</el-select>
						</div>
					</li>
					<li style="color:red;" v-if="attentionIshow">
						<span></span>
						<i class="el-icon-warning-outline" style="margin-right:5px;"></i>{{attention}}
					</li>
				</ul>
				<div class="groupbutton">
					<div style="width:100%;padding-bottom:14px;">
						<span style="color:#1664FF;font-size:14px;cursor: pointer;" @click="$router.push('/subjectmanagement')">新增选考科目</span>
					</div>
					<el-button type="primary" @click="exditstudentsure">保存</el-button>
					<el-button type="primary" @click="exditstudentgoback">返回</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import navTop from "../../components/homework/headtop.vue"
	import { get, post, del, put } from '../../request/api.js'
	export default{
		data(){
			return{
				addExamIshow:false,	
				choosesubjectlist:[],
				gradelist:['高一','高二','高三'],
				currentPage3:4,
				gradeId:'',
			  exditstudentIshow:false,
			  exitStudent:{},
			  zhswitch:false
			}
		},
		mounted() {
			this.choosesubjecttab()
		},
		methods:{
			//获取选科列表
			choosesubjecttab(){
				get('/optional/optionallist')
				.then(res=>{
					if(res.code==200){
						// //console.info(res)
						this.choosesubjectlist = res.data
					}else{
						this.$message.error(res.message);
					}
				})
				.catch(error=>{
					this.$message.error(error.message);
				})
			},
			handleSelectionChange(){
				
			},
			handleCurrentChange(){
				
			},
			handleSizeChange(){
				
			},
			handleCheckAllChange(month, checked) {
			      if (checked) {
			        month.selected = month.options.map(option => option.value);
			      } else {
			        month.selected = [];
			      }
			      this.isIndeterminate(month);
			    },
			    isIndeterminate(month) {
			      return month.selected.some(value => month.options.map(option => option.value).includes(value)) && month.selected.length !== month.options.length;
			    },
				chooseStudenttab(){
					this.exditstudentIshow = true
				},
				exditstudentsure(){
					this.exditstudentIshow = false
				},
				exditstudentgoback(){
					this.exditstudentIshow = false
				}
		},
		components:{navTop}
	}
</script>

<style scoped>
	.main{
		min-height:100vh;
		;
		background: #F4F7FD;
	}
	/* .main::-webkit-scrollbar {
		 height:8px;
		background-color: #eee;
		border-radius:10px;
	}
	.main::-webkit-scrollbar-track {
		background-color: #eee;
		border-radius:10px;
	}
	.main::-webkit-scrollbar-thumb {
		background: #619CF5;
		border-radius: 10px;
	} */
	.contentMain{
		width:auto;padding:0 40px;
		margin:0 auto;
		padding-bottom:70px;
	}
	.breadBox{
		height:32px;
		background: #fff;
		line-height: 32px;
		margin-top:2px
	}
	.el-breadcrumb{
		width:auto;
		margin:0 auto;
		line-height:30px;
		font-size:14px;
	}
	.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link{
		color:#B3B8C2
	}
	.contentmaincontent{
		width:1440px;
		;
		margin:0 auto;
	}
	.searchlist{
		box-sizing: border-box;
		width:auto;
		display: flex;
		justify-content: space-between;
		height: 54px;
		background: #FFFFFF;
		border-radius: 10px;
		padding:0 24px;
		align-items: center;
		margin-top:14px;
	}
	.searchlist{
		padding-left:20px;
		display: flex;
		align-items: center;
		justify-content: left;
	}
	.searchlist a{
		display: block;
		color:#557292;
		font-size:14px;
		width:100px;
		text-align: center;
		position: relative;
		line-height:52px;
	}
	.searchlist a:hover,.searchlist a.hover{
		color:#295CFF;
	}
	.searchlist a:hover::after,.searchlist a.hover::after{
		content:'';
		width: 24px;
		height: 4px;
		background: #295CFF;
		border-radius: 2px;
		position: absolute;
		left:50%;
		transform: translateX(-50%);
		bottom:0;
	}
	.overviewcontent{
		background: #FFFFFF;
		box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
		border-radius: 10px;
		width:auto;
		margin:15px auto 0;
		padding-top:24px;
	}
	.tableContent{
		padding:0 24px 30px;
		border-radius: 10px;
	}
	.tableContent table{
		border-radius: 10px;
		border: 1px solid rgba(216,228,240,0.5);
	}
	.tableContent table tr th{
		font-size:14px;
		font-weight:normal;
		background:#E8F0FA;
		height:42px;
	}
	.tableContent table tr th:first-child{
		border-radius: 8px 0 0 0;
	}
	.tableContent table tr th:last-child{
		border-radius: 0 8px 0 0;
	}
	.tableContent table tr td{
		height:42px;
		text-align: center;
		font-size:14px;
		border-right:solid 1px rgba(216,228,240,0.34);
	}
	.tableContent table tr td:last-child{
		border-right:none;
	}
	.tableContent table tr td i{
		display: block;
		font-style: normal;
		font-size:12px;
		color:#999
	}
	.tableContent table tr td em{
		display: block;
	}
	.tableContent table tr td span{
		position:relative;
		display: inline-block;
		cursor: pointer;
	}
	.tableContent table tr td span em{
		font-size:12px;
		font-style:normal;
	}
	.tableContent table tr td span::after{
		content:'';
		width: 43px;
		height: 1px;
		position:absolute;
		left:50%;
		bottom:-4px;
		transform: translateX(-50%);
		background:#000;
	}
	.tableContent table tr td span.green{
		color:#288F41
	}
	.tableContent table tr td span.green::after{
		content:'';
		width: 43px;
		height: 1px;
		position:absolute;
		left:50%;
		bottom:-4px;
		transform: translateX(-50%);
		background:#288F41;
	}
	.tableContent table tr td span.blue{
		color:#295CFF
	}
	.tableContent table tr td span.blue::after{
		content:'';
		width: 43px;
		height: 1px;
		position:absolute;
		left:50%;
		bottom:-4px;
		transform: translateX(-50%);
		background:#295CFF;
	}
	.tableContent table tr td span.red{
		color:#EC555A
	}
	.tableContent table tr td span.red::after{
		content:'';
		width: 43px;
		height: 1px;
		position:absolute;
		left:50%;
		bottom:-4px;
		transform: translateX(-50%);
		background:#EC555A;
	}
	.tableContent table tr td span.gray{
		color:#D8E4F0
	}
	.tableContent table tr td span.gray::after{
		content:'';
		width: 43px;
		height: 1px;
		position:absolute;
		left:50%;
		bottom:-4px;
		transform: translateX(-50%);
		background:#D8E4F0;
	}
	.tableContent table tr:nth-child(3n){
		background:#FAFAFB
	}
	.examfooter{
		width:100%;
		height:54px;
		background: rgba(255,255,255,0.6);
		box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
		position:fixed;
		left:0;
		bottom:0;
		z-index:100
	}
	.examFootercontent{
		width:auto;padding:0 40px;
		margin:0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.examFootercontent .totaldata{
		font-size:14px;
		color:#557292;
		display: flex;
		justify-content: left;
		align-items: center;
	}
	.examFootercontent .totaldata i{
		display: inline-block;
		color:#295CFF;
		font-style: normal;
		line-height:54px;
		padding:0 3px;
	}
	.examFootercontent .totaldata em{
		font-style:normal;
		width: 96px;
		height: 34px;
		border-radius: 10px;
		line-height:34px;
		background: #295CFF;
		text-align: center;
		color:#fff;
		margin-left:14px;
		cursor: pointer;
	}
	.examFootercontent .totaldata em:last-child{
		background:#EC555A;
	}
	.examFootercontent .totaldata >>> .el-pager li.active{
		background-color:#295CFF
	}
	.scorered{
		font-size:14px;
		color:#EC555A;
		padding:24px 0;
	}
	.custom-table {
	  width: 100%;
	  border: 1px solid rgba(216,228,240,0.34);
	  border-radius:10px;
	  border-right: none;
	  border-bottom:none;
	}
	
	/* 自定义表格内部元素的样式 */
	.custom-table >>> .el-table__header-wrapper th {
	  background-color: #E8F0FA;
	  height:42px;
	  padding:0;
	  text-align: center;
	  font-weight:normal
	}
	.custom-table >>> .el-table__row td {
	  height:42px;
	  padding:0;
	  text-align: center;
	  border-bottom:none;
	  border-right:solid 1px rgba(216,228,240,0.34);
	  font-size:14px;
	}
	.el-table .warning-row {
	    background: #ffffff;
	 }
	.el-table .success-row {
	    background: #D8E4F0;
	}
	.examFootercontent >>> .el-pagination__jump{
		margin-left:5px;
	}
	.examFootercontent >>> .el-pager{
		margin-top:2px;
	}
	.examFootercontent >>> .el-pager li{
		margin:0 3px;
		min-width:25px;
		height: 25px;
		line-height: 25px
	}
	.examFootercontent >>> .el-pagination button{
		height:25px;
		line-height:25px;
		margin-top:2px;
	}
	.answerlist{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding:3px 0;
	}
	.smallsubject{
		width: 48px;
		height: 22px;
		font-size:14px;
		text-align: center;
		line-height:22px;
		border-radius: 6px;
		margin:0 5px;
		background: rgba(162,53,113,0.06);
		border: 1px solid rgba(162,53,113,0.5);
		color:#A23571;
	}
	.answerlist li{
		width: 48px;
		height: 22px;
		font-size:14px;
		text-align: center;
		line-height:22px;
		border-radius: 6px;
		margin:2px 5px;
	}
	.answerlist li.zzcolor{
		background: rgba(171,81,81,0.06);
		border: 1px solid rgba(171,81,81,0.5);
		color:#AB5151
	}
	.answerlist li.hxcolor{
		background: rgba(101,120,157,0.06);
		border: 1px solid rgba(101,120,157,0.5);
		color:#65789D
	}
	.answerlist li.dlcolor{
		background: rgba(84,62,164,0.06);
		border: 1px solid rgba(84,62,164,0.5);
		color:#8B659D
	}
	.answerlist li.wlcolor{
		background: rgba(101,157,113,0.06);
		border: 1px solid rgba(101,120,157,0.5);
		color:#543EA4
	}
	.answerlist li.swcolor{
		background: rgba(101,157,113,0.06);
		border: 1px solid rgba(101,157,113,0.5);
		color:#659D71
	}
	.answerlist li.lscolor{
		background: rgba(169,140,56,0.06);
		border: 1px solid rgba(169,140,56,0.5);
		color:#A98C38
	}
	.answerlist li.ywcolor{
		background: rgba(49,121,190,0.06);
		border: 1px solid rgba(49,121,190,0.5);
		color:#3179BE
	}
	.answerlist li.yycolor{
		background: rgba(162,52,113,0.06);
		border: 1px solid rgba(162,52,113,0.5);
		color:#A23571
	}
	.answerlist li.sxcolor{
		background: rgba(62,146,164,0.06);
		border: 1px solid rgba(62,146,164,0.5);
		color:#3E91A4
	}
	.addExamMain{
		position: fixed;
		width:100%;
		height:100%;
		background:rgba(0,0,0,0.5);
		left:0;
		top:0;
		z-index:100;
	}
	.addExamContent{
		width: 584px;
		height: auto;
		background: #FFFFFF;
		box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
		border-radius: 10px;
		position: fixed;
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
		z-index:2;
		box-sizing: border-box;
		padding:30px;
	}
	.addExamContent h3{
		font-size:18px;
		padding-bottom:20px;
	}
	.groupbutton{
		display: flex;
		align-items: center;
		padding-top:20px;
		justify-content: left;
		flex-wrap: wrap;
	}
	.groupbutton >>> .el-button{
		width: 124px;
		height: 34px;
		background: #295CFF;
		border-radius: 10px;
		font-size: 14px;
		color: #FFFFFF;
		padding:0;
	}
	.groupbutton >>> .el-button:last-child{
		background: #F2F6FB;
		border-radius: 10px;
		border: 1px solid #295CFF;
		color:#295CFF;
		margin-left:24px;
	}
	.addExamContent ul li{
		display: flex;
		align-items: center;
		padding-bottom:14px;
		font-size:14px;
	}
	.addExamContent ul li span{
		font-size:14px;
		width:100px;
		color: #557292;
		text-align: right;
	}
	.addExamContent ul li p{
		position: relative;
	}
	.addExamContent ul li p em{
		position: absolute;
		right:10px;
		top:50%;
		transform: translateY(-50%);
		color:#C0C4CC;
		cursor: pointer;
	}
	.addExamContent ul li >>>.el-input__inner{
		width: 400px;
		height: 34px;
		border-radius: 10px;
		border: 1px solid #D8E4F0;
	}
	.inputBox{
		width: 400px;
	}
	.inputBox1{
		width: 300px;
	}
	.addExamContent ul li div.inputBox1 >>> .el-input__inner{
		width:300px;
		height: 34px;
		border-radius: 10px;
		border: 1px solid #D8E4F0;
	}
	.addExamContent ul li >>> .el-range__icon{
		line-height:27px;
	}
	.groupbutton{
		display: flex;
		align-items: center;
		padding-top:20px;
	}
	.groupbutton >>> .el-button{
		width: 124px;
		height: 34px;
		background: #295CFF;
		border-radius: 10px;
		font-size: 14px;
		color: #FFFFFF;
		padding:0;
	}
	.groupbutton >>> .el-button:last-child{
		background: #F2F6FB;
		border-radius: 10px;
		border: 1px solid #295CFF;
		color:#295CFF;
		margin-left:24px;
	}
	.bcontentcolor{
		font-size:14px;
		color:#295CFF;
		display: inline-block;
		margin-left:20px;
		cursor: pointer;
	}
	.infosetcontentfont{
		color:#5B6371
	}
	.addExamContent ul li.infosetcontentfont span{
		width:auto;
		height: 26px;
		border-radius: 4px;
		border: 1px solid #D8E4F0;
		color:#B3B8C2;
		font-size:14px;
		text-align:left;
		line-height:26px;
		padding:0 16px 0 10px;
		margin-left:10px;
	}
	.addExamContent ul li.infosetcontentfont i{
		font-style:normal;
		color:#295CFF;
		padding:0 4px;
	}
	.addExamContent >>> .el-upload-dragger{
		width:522px;
	}
	.uploadbox{
		width:522px;
		height:220px;
		position:relative;
	}
	.uploadbox a{
		position:absolute;
		right:0;
		bottom:10px;
		font-size:14px;
		color:#295CFF;
	}
	.breadBox >>> .el-breadcrumb__inner a,.breadBox >>> .el-breadcrumb__inner.is-link{
		font-weight:normal
	}
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{
		font-weight:bold
	}
</style>